<template>
	<view class="duixiang-container">
		<image class="duixiang-bg" :src="home_duixiang_bg"></image>
		<view class="duixiang-content">
			<view class="paidx-title">实名制脱单 匹配精准度99.5%+</view>

			<!-- 嗑糖AI图片 -->
			<image class="aiqianxian" :src="qianxianshi"></image>
			<!-- 免费派对象图片 -->
			<image class="mianfeifa" :src="mianfeifa"></image>

			<!-- 中间头像和多少人 -->
			<view v-if="isInfoNotEmpty()" class="middle-people-container">
				<!-- 中间头像 -->
				<view class="avatar-container">
					<image class="avatar-border" :src="people_avatar_border"></image>
					<image class="avatar-net" :src="getAvatar()" mode='scaleToFill'></image>
					<image class="avatar-hide" :src="people_avatar"></image>

				</view>
				<!-- 多少人参与 男女比例 此时没有报名 -->
				<view class="canyu-container" v-if="!showZhuanfa()">
					<view class="canyu-text">本轮<span>{{(activityInfoMap['participant_count'] || 0) + '人' }}</span>正在参与
					</view>
					<view class="sex-container">
						<view v-if="showMan()" class="sex-man" :style="getManScale">
							<image :src="sex_man_icon"></image>
							<view class="sex-title">男</view>
						</view>
						<view v-if="showWoman()" class="sex-woman" :style="getWomanScale">
							<image :src="sex_woman_icon"></image>
							<view class="sex-title">女</view>
						</view>
					</view>
					<view class="number-title">2000群正在同步转发</view>
				</view>

				<!--  此时报名成功 享有免费次数 （包括非会员免费次数 和会员不限制次数）  -->
				<view class="canyu-container canyu-container-left" v-if="showZhuanfa()">
					<view class="canyu-text"><span>{{ showVipTip() ? "暂停" : "等待" }}</span>{{ showVipTip() ? "派发中" : "派发中..." }}</view>
					<!-- 倒计时 -->
					<view class="time-down-container">
						<view class="time-down-text">下轮倒计时</view>
						<uni-countdown :show-day="false" :font-size="16" :hour="nextBatch['hour']"
							:minute="nextBatch['minute']" :second="nextBatch['second']" color="#875CFF"
							splitorColor="#FFFFFF" background-color="#FFFFFF" />

					</view>
				</view>

			</view>
		</view>
		<!-- 转发 -->
		<view v-if="isInfoNotEmpty()" class="zhuanfa-container">
			<view class="zhuanfa-btn-c">
				<image :src="zhuanfa_bg"></image>
				
				<button v-if="showBaoming()" class="zhuanfa-btn" @click="zhuanfaAction()">立即报名</button>
				<!-- <view class="zhuanfa-btn">
				</view> -->
				<button v-if="!isLogin" class="zhuanfa-btn" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">
					立即报名
				</button>
				<!-- 非vip正常显示转发量 -->
				<button v-if="showNormalZhuanFa()" class="zhuanfa-btn" @click="zhuanfaAction()"
					open-type="share">{{getzhuanfaTitle()}}</button>
				<!-- 显示vip提示 -->
				<button v-if="showVipTip()" class="zhuanfa-btn" @click="vipPayAction()" >开通VIP加速脱单</button>
				<!-- 是vip并且报名了显示停止派发按钮 -->
				<button v-if="isVipAndBaoming()" class="zhuanfa-btn" @click="stopPaiAction()" >暂停派发</button>
				
			</view>
			<view class="zhuanfa-des">{{getOperationTitle()}}</view>
		</view>
	</view>
</template>

<script>
	import {
		home_duixiang_bg,
		qianxianshi,
		mianfeifa,
		people_avatar_border,
		people_avatar,
		sex_man_icon,
		sex_woman_icon,
		zhuanfa_bg,
		default_avatar
	} from '../home_image_tool.js'
	export default {

		props: {
			isLogin: Boolean,
			activityInfoMap: Object,
			shareCountInfo: Object,
			paiCount:Number
		},
		data() {
			return {
				checked: false,
				nextBatch: {
					"hour": 0,
					"minute": 0,
					"second": 0,
				},
				home_duixiang_bg,
				qianxianshi,
				mianfeifa,
				people_avatar_border,
				people_avatar,
				sex_man_icon,
				sex_woman_icon,
				zhuanfa_bg
			}
		},
		methods: {
			isInfoNotEmpty(){
				let info = this.activityInfoMap || {} 
				return !(Object.keys(info).length === 0);
			},
			getAvatar() {
				return this.activityInfoMap.avatar || default_avatar;
			},
			zhuanfaAction() {
				let participation = this.activityInfoMap.participation || false;
				if (participation) {
					this.$emit("onzhuanfaAction");
				} else {
					this.$emit("onBaoMingAction");
				}

			},
			vipPayAction(){
				uni.navigateTo({
					url: "/pageA/vip/vip",
				});
			},
			// 暂停派发
			stopPaiAction(){
				this.$emit("onstopPaiAction");
			},
			decryptPhoneNumber(e) {
				this.$emit("decryptPhoneNumber", e);
			},
			timeup() {
				this.$emit("timeup");
			},
			showBaoming() {
				let login  = this.isLogin || false
				if (!login) {
					return false;
				}
				let participation = this.activityInfoMap.participation || false;
				return !participation;
			},
			showZhuanfa() {
				let login  = this.isLogin || false
				if (!login) {
					return false;
				}
				let participation = this.activityInfoMap.participation || false;
				return participation;
			},
			getLeaveTime() {
				var date = new Date();
				var now = date.getTime();
				let hour = date.getHours();

				date.setHours(0);
				date.setMinutes(0);
				date.setSeconds(0);
				var leveSeconds = 0;
				if (hour < 20) {
					var t2 = new Date(date.getTime() + 1000 * 60 * 60 * 20);
					leveSeconds = parseInt((t2 - now) / 1000);
				} else {
					var t2 = new Date(date.getTime() + 1000 * 60 * 60 * 44);
					leveSeconds = parseInt((t2 - now) / 1000);
				}

				let rHour = parseInt(leveSeconds / 3600);
				let rMinute = parseInt((leveSeconds % 3600) / 60);
				let rSeconds = leveSeconds % 60;

				this.nextBatch = {
					"hour": rHour,
					"minute": rMinute,
					"second": rSeconds,
				};
			},
			getzhuanfaTitle() {
				var info = this.shareCountInfo || {};
				var total = info.total || "0";
				var count = info.share_count || "0";
				return "主动转发" + count + "/" + total;
			},
			getOperationTitle(){
				if (this.isLogin == false) {
					return "登记后，每晚8点坐等派发你的专属CP";
				}
				if (this.showBaoming()){
					return "登记后，每晚8点坐等派发你的专属CP";
				}
				if (this.showVipTip()){
					return "您的免费次数已用完";
				}
				if (this.showNormalZhuanFa()){
					return "转发单身群越多，匹配越多哦～";
				}
				return ""
				
			},
			showWoman() {
				var woman = this.activityInfoMap['female'] || 0;
				return woman > 0;
			},
			showMan() {
				var man = this.activityInfoMap['male'] || 0;
				return man > 0;
			},
			showNormalZhuanFa(){
				if (!this.showZhuanfa()){
					return false
				}
				if (this.isVipAndBaoming()){
					return false
				}
				return this.paiCount < 20;
			},
			showVipTip(){
				if (!this.showZhuanfa()){
					return false
				}
				if (this.isVipAndBaoming()){
					return false
				}
				return this.paiCount >= 20;
			},
			isVipAndBaoming(){
				// 不满足转发条件说明不会进入vip 次数用完
				if (!this.showZhuanfa()){
					return false
				}
				let userInfo = getApp().globalData.userInfo || {};
				let vip = userInfo.vip || '-1';
				let isVip = !(vip == "-1" || vip == "");
				return isVip;
			}

		},


		mounted() {
			this.getLeaveTime()
		},
		computed: {

			getManScale() {
				var man = this.activityInfoMap['male'] || 0;
				var total = this.activityInfoMap['participant_count'] || 0;
				if (total == 0) {
					return "";
				}
				var scale = (man / total * 100).toFixed(0) + "%";
				return `width:${scale}`;
			},
			getWomanScale() {
				var man = this.activityInfoMap['male'] || 0;
				var total = this.activityInfoMap['participant_count'] || 0;
				if (total == 0) {
					return "";
				}
				var scale = (100 - (man / total * 100).toFixed(0)) + "%";
				return `width:${scale}`;
			}
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
		display: flex;
	}

	button::after {
		border: 0; // 或者 border: none;
	}

	.duixiang-container {
		width: 750rpx;
		height: 700rpx;
		position: relative;

		.duixiang-bg {
			position: absolute;
			width: 750rpx;
			height: 700rpx;
		}


		// 发对象嗑糖AI牵线
		.duixiang-content {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.paidx-title {
				margin-top: 9px;
				padding-left: 15px;
				font-weight: 400;
				font-size: 11px;
				line-height: 15px;

				color: #FFFFFF;
				margin-left: 6px;
				align-self: flex-start;
			}

			.aiqianxian {
				margin-top: 80rpx;
				width: 464rpx;
				height: 72rpx;
			}

			.mianfeifa {
				margin-top: 30rpx;
				width: 572rpx;
				height: 66rpx;
			}

			// 中间头像 及多少人参与
			.middle-people-container {
				margin-top: 54rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				// 头像
				.avatar-container {
					margin: 0 40rpx;
					display: flex;
					flex-direction: row;
					width: 186rpx;
					height: 106rpx;
					position: relative;

					.avatar-net {
						position: absolute;
						width: 96rpx;
						height: 96rpx;
						border-radius: 48rpx;
						left: 6rpx;
						top: 6rpx;
						z-index: 10;
					}

					.avatar-border {
						position: absolute;
						height: 106rpx;
						width: 107rpx;
						border-radius: 53rpx;
						z-index: 20;
					}

					.avatar-hide {
						left: 80rpx;
						position: absolute;
						height: 106rpx;
						width: 106rpx;
						border-radius: 53rpx;
					}

				}

				// 多少人参与和男女比例
				.canyu-container {
					display: flex;
					flex-direction: column;
					align-items: center;

					.canyu-text {
						font-weight: 400;
						font-size: 32rpx;
						line-height: 46rpx;
						color: #FFFFFF;

						span {
							font-size: 44rpx;
							font-weight: 600;
							color: #FFDA74;
						}
					}
					
					.time-down-container {
						height: 26px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						margin-top: 4px;
						.time-down-text {
							font-weight: 400;
							font-size: 11px;
							line-height: 15px;
							color: #FFFFFF;
							margin-right: 7px;
						}
					}
					.sex-container {
						width: 322rpx;
						height: 30rpx;
						min-width: 161px;
						border-radius: 18rpx;
						display: flex;
						flex-direction: row;
						overflow: hidden;
						margin-top: 6rpx;
						margin-bottom: 12rpx;

						.sex-man {
							display: flex;
							flex-direction: row;
							align-items: center;
							// width: 60%;
							height: 100%;
							padding-left: 10px;
							background-color: #87BFFF;

							image {
								width: 18rpx;
								height: 18rpx;
							}
						}

						.sex-woman {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-end;
							padding-right: 10px;
							height: 100%;
							width: 40%;
							background-color: #F4B0FF;
							border-top-right-radius: 18rpx;
							border-bottom-right-radius: 18rpx;

							image {
								width: 16rpx;
								height: 20rpx;
							}
						}

						.sex-title {
							margin-left: 2px;
							font-weight: 400;
							font-size: 22rpx;
							line-height: 30rpx;
							color: #FFFFFF;
						}

					}
				}

				.canyu-container-left {
					align-items: flex-start;
				}

				.number-title {
					font-weight: 400;
					font-size: 22rpx;
					line-height: 30rpx;
					color: #FFFFFF;
					opacity: 0.7;
				}
			}

		}

		.zhuanfa-container {
			margin-top: 52rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.zhuanfa-btn-c {
				position: relative;
				width: 342rpx;

				image {
					width: 342rpx;
					height: 108rpx;
					position: absolute;
				}

				.zhuanfa-btn {
					width: 100%;
					height: 92rpx;
					position: relative;
					font-weight: 600;
					font-size: 20px;
					line-height: 92rpx;
					letter-spacing: -0.3px;
					text-align: center;
					color: #333333;
					background-color: transparent
				}
			}

			.zhuanfa-des {
				margin-top: 12rpx;
				margin-bottom: 44rpx;
				position: relative;
				font-weight: 400;
				font-size: 22rpx;
				line-height: 30rpx;
				letter-spacing: -0.3px;
				color: #2328AF;
				opacity: 0.8;
			}

		}
	}
</style>
